export default {
    template:`
    <div class="my-switch">
        <label v-if="Array.isArray(flag)" class="switch-btn" :class="{ active:flag.includes(value) }">
            <input type="checkbox" :value="value" :checked="flag.includes(value)" @change="printSwitchBtnState($event)">
            <span class="pot"></span>
        </label>
        <label v-else class="switch-btn" :class="{ active:flag }">
            <input type="checkbox" :checked="flag" @change="printSwitchBtnState($event)">
            <span class="pot"></span>
        </label>
    </div>
    `,
    emits:["update:flag"],
    props:{
        flag:{
            type:[Boolean,Array],
            // default:false
            default(){
                return []
            }
        },
        value:{
            type:String,
            default:""
        }
    },
    methods:{
        printSwitchBtnState(e){
            let temp = this.flag;
            if(Array.isArray(temp)){
                // 原数组中是否存在当前的数据值
                let i = temp.indexOf(e.target.value)
                if(i==-1){
                    temp.push( e.target.value )
                }else{
                    temp.splice(i,1)
                }
                this.$emit("update:flag",temp)
            }else{
                // 状态记录
                this.$emit("update:flag",e.target.checked)
            }
        }
    }
}